<!-- src/views/AnnouncementDetailView.vue -->
<template>
  <div class="announcement-detail-container" v-loading="loading">
    <el-page-header @back="$router.go(-1)" :content="announcement.title || '加载中...'" style="margin-bottom: 20px;" />

    <el-alert
      v-if="errorMessage"
      :title="errorMessage"
      type="error"
      show-icon
      closable
      style="margin-bottom: 20px;"
    />

    <div v-if="announcement.id" class="announcement-content">
      <h1>{{ announcement.title }}</h1>
      <div class="announcement-meta">
        <span>类型:
          <el-tag :type="announcement.type === 2 ? 'danger' : 'primary'" size="small" effect="dark">
            {{ announcement.type === 2 ? '重要' : '普通' }}
          </el-tag>
        </span> |
        <span>发布时间: {{ formatDate(announcement.createdAt) }}</span> |
        <span>最后更新: {{ formatDate(announcement.updatedAt) }}</span>
      </div>
      <div class="announcement-body" v-html="sanitizeHtml(announcement.content)"></div> <!-- 注意 XSS 风险 -->
    </div>

    <div v-else-if="!loading" class="announcement-not-found">
      <p>公告未找到。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { getActiveAnnouncementById } from '@/services/apiService'; // 引入获取公告详情的 API 服务
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import DOMPurify from 'dompurify';

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();

const loading = ref(false);
const errorMessage = ref('');

const announcement = ref({
  id: null, title: '', content: '', type: 1, status: 1, createdAt: '', updatedAt: ''
});

const announcementId = computed(() => route.params.id);

// 格式化日期
const formatDate = (dateString) => {
  return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
};

// HTML 消毒 (防止 XSS)
const sanitizeHtml = (htmlContent) => {
  return DOMPurify.sanitize(htmlContent || '');
};

// 获取公告详情
const fetchAnnouncementDetail = async () => {
  if (!announcementId.value) return;
  loading.value = true;
  errorMessage.value = '';
  try {
    const response = await getActiveAnnouncementById(announcementId.value);
    announcement.value = response.data;
  } catch (error) {
    console.error('Failed to fetch announcement detail:', error);
    errorMessage.value = error.response?.data?.message || '获取公告详情失败';
    ElMessage.error(errorMessage.value);
    if (error.response?.status === 404) {
      router.push('/404'); // 或者显示 404 页面
    }
  } finally {
    loading.value = false;
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchAnnouncementDetail();
});

// 监听路由参数变化 (如果需要)
// import { watch } from 'vue';
// watch(announcementId, (newId, oldId) => {
//   if (newId && newId !== oldId) {
//     fetchAnnouncementDetail();
//   }
// });
</script>

<style scoped>
.announcement-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.announcement-meta {
  margin-bottom: 20px;
  color: #999;
  font-size: 0.9em;
}
.announcement-body {
  white-space: pre-wrap; /* 保留换行和空格 */
  text-align: left;
  border-top: 1px solid #eee;
  padding-top: 20px;
  margin-top: 20px;
}
.announcement-not-found {
  text-align: center;
  color: #999;
  font-size: 1.2em;
  margin-top: 50px;
}
</style>
